<template>
  <view class="customer-order-list">
    <tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19" @change="change" itemWidth="20%">
    </tui-tabs>
    <view class="tui-order-list">
      <view v-if="list.length !== 0">
        <view class="tui-order-item" v-for="(row, index) in list" :key="index">
          <tui-list-cell :hover="false" :lineLeft="false">
            <view class="tui-goods-title">
              <view>订单号：{{row.orderId}}</view>
              <view class="tui-order-status">{{ orderStatusEnums[row.orderStatus] || '' }}</view>
            </view>
          </tui-list-cell>
          <block v-for="(item, i) in row.items" :key="i">
            <tui-list-cell padding="0" @click="detail(item.productCode)">
              <view class="tui-goods-item">
                <image :src="item.productItemPic" class="tui-goods-img"></image>
                <view class="tui-goods-center">
                  <view class="tui-goods-name">{{item.productItemName}}</view>
                  <view class="tui-goods-attr">{{ (item.productItemSpecDTOS || []).map(d => d.propertyName).join(', ') }}</view>
                  <view class="tui-goods-time">
                    {{row.createTime.replace('T', ' ')}}
                  </view>
                </view>
                <view class="tui-price-right">
                  <view>¥{{item.productItemPrice}}</view>
                  <view>x{{item.productItemNum}}</view>
                </view>
              </view>
            </tui-list-cell>
          </block>
          <tui-list-cell :hover="false" unlined>
            <view class="tui-goods-price">
              <view>共{{ row.items.length }}件商品 合计：</view>
              <view class="tui-size-24">￥</view>
              <view class="tui-price-large">{{ row.orderAmount }}</view>
            </view>
          </tui-list-cell>
        </view>
      </view>
      <view class="mt20" v-else>
        <tui-no-data :fixed="false" imgUrl="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/img_noorder_3x.png">暂无订单</tui-no-data>
      </view>
      <uni-load-more :status="moreStatus" v-if="list.length"></uni-load-more>
    </view>
  </view>
</template>

<script>
import { LoadMore, orderStatusEnums } from "@/constants";

export default {
  data() {
    return {
      orderStatusEnums,
      currentTab: 0,
      scrollTop: 0,
      list: [],
      orderStatus: "1,2,3,4,5,6,7,8,10,12",
      moreStatus: LoadMore.noop,
      tabs: [
        {
          name: "全部",
          value: '1,2,3,4,5,6,7,8,10,12',
          index: 0,
        },
        {
          name: "待付款",
          value: 1,
          index: 1,
        },
        {
          name: "待发货",
          value: 3,
          index: 2,
        },
        {
          name: "待收货",
          value: '4,5,6',
          index: 3,
        },
        {
          name: "已完成",
          value: 9,
          index: 4,
        },
      ],
    };
  },
  mounted() {
    this.datas = {
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
    };
    uni.showLoading();
    this.getOrders();
  },
  methods: {
    change(e) {
      this.datas.pagination.pageNum = 1;
      const statusObj = this.tabs.find((d) => d.index === e.index);
      this.orderStatus = statusObj.value;
      this.currentTab = e.index;
      uni.showLoading();
      this.getOrders();
    },
    async getOrders() {
      const { state: { customerId, merchantId } = {} } = this.$store;
      const { pageNum, pageSize } = this.datas.pagination;
      const { success, data } = await this.$api.getOrders({
        // customerId,
        orderStatus: this.orderStatus,
        merchantId,
        pageNum,
        pageSize,
      });
      if (success) {
        if (pageNum === 1) {
          this.list = data;
        } else {
          if (data && data.length) {
            this.list = this.list.concat(data);
            this.moreStatus = LoadMore.noop;
          } else {
            this.moreStatus = LoadMore.nomore;
          }
        }
      }
      uni.hideLoading();
    },
    detail(id) {
      uni.navigateTo({
        url: `/pagesB/productDetail/productDetail?productCode=${id}`,
      });
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    if (![LoadMore.nomore, LoadMore.loading].includes(this.moreStatus)) {
      this.moreStatus = LoadMore.loading;
      this.datas.pagination.pageNum++;
      this.getOrders();
    }
  },
};
</script>

<style lang="scss">
page {
  background: #f7f7f7;
}
.customer-order-list {
  padding-bottom: env(safe-area-inset-bottom);
  .mt20 {
    margin-top: 100rpx;
  }
  .tui-order-list {
    margin-top: 80rpx;
  }
  .tui-order-item {
    margin-top: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    .tui-goods-title {
      width: 100%;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tui-goods-item {
      width: 100%;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .tui-goods-img {
        width: 180rpx;
        height: 180rpx;
        display: block;
        flex-shrink: 0;
      }
      .tui-goods-center {
        flex: 1;
        padding: 20rpx 8rpx 0;
        box-sizing: border-box;
        .tui-goods-name {
          max-width: 310rpx;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          font-size: 26rpx;
          line-height: 32rpx;
        }

        .tui-goods-attr {
          font-size: 22rpx;
          color: #888888;
          line-height: 32rpx;
          padding-top: 20rpx;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .tui-goods-time {
          font-size: 22rpx;
          color: #888888;
          padding-top: 45rpx;
        }
      }
      .tui-price-right {
        text-align: right;
        font-size: 24rpx;
        color: #888888;
        line-height: 30rpx;
        padding-top: 20rpx;
      }
    }
    .tui-goods-price {
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      font-size: 24rpx;
      .tui-size-24 {
        font-size: 24rpx;
        line-height: 24rpx;
      }
      .tui-price-large {
        font-size: 32rpx;
        line-height: 30rpx;
        font-weight: 500;
      }
    }
  }
}
</style>
